<template>
    <div class="tab flex-box bg-c-wh">
        <div tag="div" class="tab-item" 
            v-for="(item, key) in tabArr"
            :key="key"
            :class="{
                'tab-check': $store.state.tabTogIndex == key,
                'tab-unCheck': $store.state.tabTogIndex != key
            }" 
            @click="changeData(key)">
            <span>{{ item }}</span>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data () {
        return {
        }
    },
    created () {
    },
    props: {
        tabArr: Array
    },
    methods: {
        changeData (key) {
            this.$store.state.tabTogIndex = key
        }
    },
    destroyed () {
        this.$store.state.tabTogIndex = 0
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
    .tab
        height: 2.75rem
        line-height: 2.75rem
        font-size: $fonts-14
    .tab-item
        flex: 1
        text-align: center
    .tab-check
        color: $color-r
        border-bottom: 2px solid $color-r 
    .tab-unCheck
        color: $color-2
        border-bottom: 2px solid $color-f0
</style>